<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
				font-size: 14px;
				list-style: none;
			}
			#cart{
				width:60px;
				height:30px;
				line-height: 30px;
				text-align: center;
				border:1px solid red;
				position: absolute;
				left:50%;
				margin-left:-30px;
				margin-top: 50px;
				background-color: aliceblue;
				cursor: pointer;
			}
			#mark{
				width:200px;
				height:100px;
				border:1px solid red;
				background-color: aquamarine;
				margin-left: -1px;
				margin-top: -1px;
			}
		</style>
	</head>
	<body>
		<div id="cart">
			<span>购物车</span>
			<div id="mark" style="display: none;">
				查看购物车详情
			</div>
		</div>
		<script>
			var cart = document.getElementById('cart');
			var mark = document.getElementById('mark');
			
			document.onclick = function(e){
				e = e || window.event;
				e.target = e.target || e.srcElement;
				//如果点击的是 cart 或者 是cart中的span ,那么切换mark的显示或隐藏
				if(e.target.id === 'cart' || e.target.tagName === 'SPAN' && e.target.parentNode.id === 'cart'){

					if(mark.style.display === 'none'){
						mark.style.display = 'block';
					}else{
						mark.style.display = 'none';
					}
					return;
				}
				
				// 如果点击的是mark 那么不做任何操作
				if(e.target.id === 'mark'){
					return;
				}


                
				// 其他情况,那么就将mark隐藏
				mark.style.display = 'none';
			}
		</script>
	</body>
</html>